<template>
	<div id="ToolsIndex">
		<el-row>
			<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :span="8" v-for="item in items" v-bind:key="item" offset="2" style="padding:10px">
				<el-card :body-style="{ padding: '0px' }">
					<i :class="item.icon"></i>
					<div style="padding: 14px;" @click="toolslink(item)">
						<span>{{item.title}}</span>
						<div class="bottom clearfix">
							<time class="time">{{item.content }}</time>
							<el-button type="text" class="button">进入...</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col class="tag_style" :xs="24">
				<el-tag type="warning"> 标签：</el-tag>
				<template v-for='item in items'>
					<el-tag style="margin-left: 0.325rem;" @click="toolslink(item)">{{item.title}}</el-tag>
				</template>
			</el-col>
		</el-row>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				items: [
					// {
					// 	icon: 'el-icon-star-off',
					// 	type: 'url',
					// 	index: 'http://mxdqh.top/Editor.swf',
					// 	title: '在线photoShop图片修改,在线图片修改,在线截图',
					// 	content: "图片修改,在线图片修改,在线截图"
					// }, 
					{
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'QRcodeGeneration',
						title: '条码/二维码生成',
						content: "将文字转化为条码和二维码,方便快速生成条码"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'QRcodesGeneration',
						title: '批量二维码生成',
						content: "批量将文字转化为二维码,方便快速生成条码"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'Base64Encoding',
						title: 'Base64编码/解码',
						content: "将文字进行Base64编码或解码"
					},
					{
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'SqlCodeFormat',
						title: 'sql代码格式化',
						content: "整理sql语句格式！"
					}, {
						icon: 'el-icon-star-off',
						index: 'JsonCodeCheck',
						type: 'route',
						title: 'JSON格式校验',
						content: "JSON格式校验"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'JsonCodeFormat',
						title: 'JSON格式整理',
						content: "JSON格式整理"
					},
					{
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'WordsNumber',
						title: '字数统计',
						content: "统计输入字符串的文字字符长度！"
					},
					{
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'Md5Encryption',
						title: 'MD5加密',
						content: "将文字进行MD5加密"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'NumMoney',
						title: '数字转大写金额',
						content: "将数字转换为金额"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'Extranet',
						title: '外网Ip',
						content: "外网Ip"
					}, {
						icon: 'el-icon-star-off',
						type: 'route',
						index: 'Weather',
						title: '查看天气',
						content: "查看天气"
					},
				]
			};
		},
		metaInfo: {
			title: '自由的个人博客——在线工具', // set a title
			meta: [{ // set meta
				name: '二维码生成,json,JSON格式转换,条码生成,sql格式化,sql代码整理,Base64编码,Base64解码,数字转大写金额,MD5加密',
				content: '在线工具,程序员开发的时候和生活中比较实用的开发工具箱，方便大家的使用和借鉴'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		methods: {
			toolslink(item) {
				if (item.type == "url") {
					window.open("http://mxdqh.top/Editor.swf")
					// window.location.href = "http://mxdqh.top/Editor.swf";
				} else {

					let routeUrl = this.$router.resolve({
						path: item.index,
						name: item.index,
						query: item
					});
					window.open(routeUrl.href, '_blank');
					// this.$router.push({
					// 	path: item.index,
					// 	name: item.index
					// })
				}
			}
		}
	}
</script>

<style>
	.tag_style {}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
